<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIP2 HTTP API Test Page</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4">SIP2 HTTP API Test Page</h1>
        
        <!-- Login -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#loginFormCollapse"><h2>Login</h2></a>
            </div>
            <div id="loginFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="loginUserId" class="form-label">User ID</label>
                            <input type="text" class="form-control" id="loginUserId" required>
                        </div>
                        <div class="mb-3">
                            <label for="loginPassword" class="form-label">Password</label>
                            <input type="password" class="form-control" id="loginPassword" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="loginResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- SC Status -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#scStatusFormCollapse"><h2>SC Status</h2></a>
            </div>
            <div id="scStatusFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="scStatusForm">
                        <div class="mb-3">
                            <label for="scStatusCode" class="form-label">Status Code</label>
                            <input type="number" class="form-control" id="scStatusCode" value="0">
                        </div>
                        <div class="mb-3">
                            <label for="scMaxPrintWidth" class="form-label">Max Print Width</label>
                            <input type="text" class="form-control" id="scMaxPrintWidth" value="080">
                        </div>
                        <div class="mb-3">
                            <label for="scProtocolVersion" class="form-label">Protocol Version</label>
                            <input type="number" class="form-control" id="scProtocolVersion" value="2">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="scStatusResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Request Resend -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#requestResendFormCollapse"><h2>Request Resend</h2></a>
            </div>
            <div id="requestResendFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="requestResendForm">
                        <div class="mb-3">
                            <label for="requestResendPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="requestResendPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="requestResendPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="requestResendPatronPwd" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="requestResendResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Patron Status -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#patronStatusFormCollapse"><h2>Patron Status</h2></a>
            </div>
            <div id="patronStatusFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="patronStatusForm">
                        <div class="mb-3">
                            <label for="patronStatusPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="patronStatusPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="patronStatusPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="patronStatusPatronPwd" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="patronStatusResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Patron Info -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#patronInfoFormCollapse"><h2>Patron Info</h2></a>
            </div>
            <div id="patronInfoFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="patronInfoForm">
                        <div class="mb-3">
                            <label for="patronInfoPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="patronInfoPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="patronInfoPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="patronInfoPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="patronInfoType" class="form-label">Info Type</label>
                            <input type="text" class="form-control" id="patronInfoType" value="none">
                        </div>
                        <div class="mb-3">
                            <label for="patronInfoStartItem" class="form-label">Start Item</label>
                            <input type="text" class="form-control" id="patronInfoStartItem" value="1">
                        </div>
                        <div class="mb-3">
                            <label for="patronInfoEndItem" class="form-label">End Item</label>
                            <input type="text" class="form-control" id="patronInfoEndItem" value="5">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="patronInfoResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Block Patron -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#blockPatronFormCollapse"><h2>Block Patron</h2></a>
            </div>
            <div id="blockPatronFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="blockPatronForm">
                        <div class="mb-3">
                            <label for="blockPatronPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="blockPatronPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="blockPatronMsg" class="form-label">Blocked Card Message</label>
                            <input type="text" class="form-control" id="blockPatronMsg" value="Blocked by system">
                        </div>
                        <div class="mb-3">
                            <label for="blockPatronCardRetained" class="form-label">Card Retained</label>
                            <input type="text" class="form-control" id="blockPatronCardRetained" value="N">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="blockPatronResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Patron Enable -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#patronEnableFormCollapse"><h2>Patron Enable</h2></a>
            </div>
            <div id="patronEnableFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="patronEnableForm">
                        <div class="mb-3">
                            <label for="patronEnablePatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="patronEnablePatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="patronEnablePatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="patronEnablePatronPwd" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="patronEnableResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Item Info -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#itemInfoFormCollapse"><h2>Item Info</h2></a>
            </div>
            <div id="itemInfoFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="itemInfoForm">
                        <div class="mb-3">
                            <label for="itemInfoItemId" class="form-label">Item ID</label>
                            <input type="text" class="form-control" id="itemInfoItemId" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="itemInfoResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Checkout -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#checkoutFormCollapse"><h2>Checkout</h2></a>
            </div>
            <div id="checkoutFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="checkoutForm">
                        <div class="mb-3">
                            <label for="checkoutPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="checkoutPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkoutPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="checkoutPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkoutItemId" class="form-label">Item ID</label>
                            <input type="text" class="form-control" id="checkoutItemId" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkoutNbDueDate" class="form-label">Due Date</label>
                            <input type="text" class="form-control" id="checkoutNbDueDate">
                        </div>
                        <div class="mb-3">
                            <label for="checkoutScRenewalPolicy" class="form-label">SC Renewal Policy</label>
                            <input type="text" class="form-control" id="checkoutScRenewalPolicy" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="checkoutItemProperties" class="form-label">Item Properties</label>
                            <input type="text" class="form-control" id="checkoutItemProperties">
                        </div>
                        <div class="mb-3">
                            <label for="checkoutFeeAcknowledged" class="form-label">Fee Acknowledged</label>
                            <input type="text" class="form-control" id="checkoutFeeAcknowledged" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="checkoutNoBlock" class="form-label">No Block</label>
                            <input type="text" class="form-control" id="checkoutNoBlock" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="checkoutCancel" class="form-label">Cancel</label>
                            <input type="text" class="form-control" id="checkoutCancel" value="N">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="checkoutResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Checkin -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#checkinFormCollapse"><h2>Checkin</h2></a>
            </div>
            <div id="checkinFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="checkinForm">
                        <div class="mb-3">
                            <label for="checkinItemId" class="form-label">Item ID</label>
                            <input type="text" class="form-control" id="checkinItemId" required>
                        </div>
                        <div class="mb-3">
                            <label for="checkinReturnDate" class="form-label">Return Date</label>
                            <input type="text" class="form-control" id="checkinReturnDate">
                        </div>
                        <div class="mb-3">
                            <label for="checkinCurrentLocation" class="form-label">Current Location</label>
                            <input type="text" class="form-control" id="checkinCurrentLocation">
                        </div>
                        <div class="mb-3">
                            <label for="checkinItemProperties" class="form-label">Item Properties</label>
                            <input type="text" class="form-control" id="checkinItemProperties">
                        </div>
                        <div class="mb-3">
                            <label for="checkinNoBlock" class="form-label">No Block</label>
                            <input type="text" class="form-control" id="checkinNoBlock" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="checkinCancel" class="form-label">Cancel</label>
                            <input type="text" class="form-control" id="checkinCancel">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="checkinResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Fee Paid -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#feePaidFormCollapse"><h2>Fee Paid</h2></a>
            </div>
            <div id="feePaidFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="feePaidForm">
                        <div class="mb-3">
                            <label for="feePaidPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="feePaidPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="feePaidPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="feePaidPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="feePaidFeeType" class="form-label">Fee Type</label>
                            <input type="text" class="form-control" id="feePaidFeeType" value="01">
                        </div>
                        <div class="mb-3">
                            <label for="feePaidPaymentType" class="form-label">Payment Type</label>
                            <input type="text" class="form-control" id="feePaidPaymentType" value="00">
                        </div>
                        <div class="mb-3">
                            <label for="feePaidFeeAmount" class="form-label">Fee Amount</label>
                            <input type="text" class="form-control" id="feePaidFeeAmount" value="0.00">
                        </div>
                        <div class="mb-3">
                            <label for="feePaidFeeIdentifier" class="form-label">Fee Identifier</label>
                            <input type="text" class="form-control" id="feePaidFeeIdentifier">
                        </div>
                        <div class="mb-3">
                            <label for="feePaidTransactionId" class="form-label">Transaction ID</label>
                            <input type="text" class="form-control" id="feePaidTransactionId">
                        </div>
                        <div class="mb-3">
                            <label for="feePaidCurrencyType" class="form-label">Currency Type</label>
                            <input type="text" class="form-control" id="feePaidCurrencyType" value="EUR">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="feePaidResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- End Session -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#endSessionFormCollapse"><h2>End Session</h2></a>
            </div>
            <div id="endSessionFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="endSessionForm">
                        <div class="mb-3">
                            <label for="endSessionPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="endSessionPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="endSessionPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="endSessionPatronPwd" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="endSessionResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Hold -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#holdFormCollapse"><h2>Hold</h2></a>
            </div>
            <div id="holdFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="holdForm">
                        <div class="mb-3">
                            <label for="holdPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="holdPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="holdPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="holdPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="holdMode" class="form-label">Hold Mode</label>
                            <input type="text" class="form-control" id="holdMode" value="+">
                        </div>
                        <div class="mb-3">
                            <label for="holdExpirationDate" class="form-label">Expiration Date</label>
                            <input type="text" class="form-control" id="holdExpirationDate">
                        </div>
                        <div class="mb-3">
                            <label for="holdType" class="form-label">Hold Type</label>
                            <input type="text" class="form-control" id="holdType">
                        </div>
                        <div class="mb-3">
                            <label for="holdItemId" class="form-label">Item ID</label>
                            <input type="text" class="form-control" id="holdItemId">
                        </div>
                        <div class="mb-3">
                            <label for="holdTitleId" class="form-label">Title ID</label>
                            <input type="text" class="form-control" id="holdTitleId">
                        </div>
                        <div class="mb-3">
                            <label for="holdFeeAcknowledged" class="form-label">Fee Acknowledged</label>
                            <input type="text" class="form-control" id="holdFeeAcknowledged">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="holdResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Renew -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#renewFormCollapse"><h2>Renew</h2></a>
            </div>
            <div id="renewFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="renewForm">
                        <div class="mb-3">
                            <label for="renewPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="renewPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="renewPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="renewPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="renewItemId" class="form-label">Item ID</label>
                            <input type="text" class="form-control" id="renewItemId" required>
                        </div>
                        <div class="mb-3">
                            <label for="renewTitleId" class="form-label">Title ID</label>
                            <input type="text" class="form-control" id="renewTitleId">
                        </div>
                        <div class="mb-3">
                            <label for="renewNbDueDate" class="form-label">Due Date</label>
                            <input type="text" class="form-control" id="renewNbDueDate">
                        </div>
                        <div class="mb-3">
                            <label for="renewItemProperties" class="form-label">Item Properties</label>
                            <input type="text" class="form-control" id="renewItemProperties">
                        </div>
                        <div class="mb-3">
                            <label for="renewFeeAcknowledged" class="form-label">Fee Acknowledged</label>
                            <input type="text" class="form-control" id="renewFeeAcknowledged" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="renewNoBlock" class="form-label">No Block</label>
                            <input type="text" class="form-control" id="renewNoBlock" value="N">
                        </div>
                        <div class="mb-3">
                            <label for="renewThirdPartyAllowed" class="form-label">Third Party Allowed</label>
                            <input type="text" class="form-control" id="renewThirdPartyAllowed" value="N">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="renewResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>

        <!-- Renew All -->
        <div class="card mb-3">
            <div class="card-header">
                <a class="collapsed card-link" data-bs-toggle="collapse" href="#renewAllFormCollapse"><h2>Renew All</h2></a>
            </div>
            <div id="renewAllFormCollapse" class="collapse">
                <div class="card-body">
                    <form id="renewAllForm">
                        <div class="mb-3">
                            <label for="renewAllPatron" class="form-label">Patron</label>
                            <input type="text" class="form-control" id="renewAllPatron" required>
                        </div>
                        <div class="mb-3">
                            <label for="renewAllPatronPwd" class="form-label">Patron Password</label>
                            <input type="password" class="form-control" id="renewAllPatronPwd" required>
                        </div>
                        <div class="mb-3">
                            <label for="renewAllFeeAcknowledged" class="form-label">Fee Acknowledged</label>
                            <input type="text" class="form-control" id="renewAllFeeAcknowledged" value="N">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                    <pre id="renewAllResponse" class="mt-3"></pre>
                </div>
            </div>
        </div>
     
    </div>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // JavaScript code to handle form submissions and API requests
        $(document).ready(function() {
            // Login form submission
            $('#loginForm').submit(function(event) {
                event.preventDefault();
                var loginUserId = $('#loginUserId').val();
                var loginPassword = $('#loginPassword').val();
                $.ajax({
                    url: '/login',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ loginUserId: loginUserId, loginPassword: loginPassword }),
                    success: function(response) {
                        $('#loginResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#loginResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // SC Status form submission
            $('#scStatusForm').submit(function(event) {
                event.preventDefault();
                var scStatusCode = $('#scStatusCode').val();
                var scMaxPrintWidth = $('#scMaxPrintWidth').val();
                var scProtocolVersion = $('#scProtocolVersion').val();

                $.ajax({
                    url: '/sc_status',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ scStatusCode: scStatusCode, scMaxPrintWidth: scMaxPrintWidth, scProtocolVersion: scProtocolVersion }),
                    success: function(response) {
                        $('#scStatusResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#scStatusResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Request Resend form submission
            $('#requestResendForm').submit(function(event) {
                event.preventDefault();
                var requestResendPatron = $('#requestResendPatron').val();
                var requestResendPatronPwd = $('#requestResendPatronPwd').val();
                $.ajax({
                    url: '/request_resend',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ requestResendPatron: requestResendPatron, requestResendPatronPwd: requestResendPatronPwd }),
                    success: function(response) {
                        $('#requestResendResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#requestResendResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Patron Status form submission
            $('#patronStatusForm').submit(function(event) {
                event.preventDefault();
                var patronStatusPatron = $('#patronStatusPatron').val();
                var patronStatusPatronPwd = $('#patronStatusPatronPwd').val();
                $.ajax({
                    url: '/patron_status',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ patronStatusPatron: patronStatusPatron, patronStatusPatronPwd: patronStatusPatronPwd }),
                    success: function(response) {
                        $('#patronStatusResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#patronStatusResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Patron Info form submission
            $('#patronInfoForm').submit(function(event) {
                event.preventDefault();
                var patronInfoPatron = $('#patronInfoPatron').val();
                var patronInfoPatronPwd = $('#patronInfoPatronPwd').val();
                var patronInfoType = $('#patronInfoType').val();
                var patronInfoStartItem = $('#patronInfoStartItem').val();
                var patronInfoEndItem = $('#patronInfoEndItem').val();
                $.ajax({
                    url: '/patron_info',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ patronInfoPatron: patronInfoPatron, patronInfoPatronPwd: patronInfoPatronPwd, patronInfoType: patronInfoType, patronInfoStartItem: patronInfoStartItem, patronInfoEndItem: patronInfoEndItem }),
                    success: function(response) {
                        $('#patronInfoResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#patronInfoResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Block Patron form submission
            $('#blockPatronForm').submit(function(event) {
                event.preventDefault();
                var blockPatronPatron = $('#blockPatronPatron').val();
                var blockPatronMsg = $('#blockPatronMsg').val();
                var blockPatronCardRetained = $('#blockPatronCardRetained').val();
                $.ajax({
                    url: '/block_patron',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ blockPatronPatron: blockPatronPatron, blockPatronMsg: blockPatronMsg, blockPatronCardRetained: blockPatronCardRetained }),
                    success: function(response) {
                        $('#blockPatronResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#blockPatronResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Patron Enable form submission
            $('#patronEnableForm').submit(function(event) {
                event.preventDefault();
                var patronEnablePatron = $('#patronEnablePatron').val();
                var patronEnablePatronPwd = $('#patronEnablePatronPwd').val();
                $.ajax({
                    url: '/patron_enable',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ patronEnablePatron: patronEnablePatron, patronEnablePatronPwd: patronEnablePatronPwd }),
                    success: function(response) {
                        $('#patronEnableResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#patronEnableResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Item Info form submission
            $('#itemInfoForm').submit(function(event) {
                event.preventDefault();
                var itemInfoItemId = $('#itemInfoItemId').val();
                $.ajax({
                    url: '/item_info',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ itemInfoItemId: itemInfoItemId }),
                    success: function(response) {
                        $('#itemInfoResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#itemInfoResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Checkout form submission
            $('#checkoutForm').submit(function(event) {
                event.preventDefault();
                var checkoutPatron = $('#checkoutPatron').val();
                var checkoutPatronPwd = $('#checkoutPatronPwd').val();
                var checkoutItemId = $('#checkoutItemId').val();
                var checkoutNbDueDate = $('#checkoutNbDueDate').val();
                var checkoutScRenewalPolicy = $('#checkoutScRenewalPolicy').val();
                var checkoutItemProperties = $('#checkoutItemProperties').val();
                var checkoutFeeAcknowledged = $('#checkoutFeeAcknowledged').val();
                var checkoutNoBlock = $('#checkoutNoBlock').val();
                var checkoutCancel = $('#checkoutCancel').val();
                $.ajax({
                    url: '/checkout',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ checkoutPatron: checkoutPatron, checkoutPatronPwd: checkoutPatronPwd, checkoutItemId: checkoutItemId, checkoutNbDueDate: checkoutNbDueDate, checkoutScRenewalPolicy: checkoutScRenewalPolicy, checkoutItemProperties: checkoutItemProperties, checkoutFeeAcknowledged: checkoutFeeAcknowledged, checkoutNoBlock: checkoutNoBlock, checkoutCancel: checkoutCancel }),
                    success: function(response) {
                        $('#checkoutResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#checkoutResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Checkin form submission
            $('#checkinForm').submit(function(event) {
                event.preventDefault();
                var checkinItemId = $('#checkinItemId').val();
                var checkinReturnDate = $('#checkinReturnDate').val();
                var checkinCurrentLocation = $('#checkinCurrentLocation').val();
                var checkinItemProperties = $('#checkinItemProperties').val();
                var checkinNoBlock = $('#checkinNoBlock').val();
                var checkinCancel = $('#checkinCancel').val();
                $.ajax({
                    url: '/checkin',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ checkinItemId: checkinItemId, checkinReturnDate: checkinReturnDate, checkinCurrentLocation: checkinCurrentLocation, checkinItemProperties: checkinItemProperties, checkinNoBlock: checkinNoBlock, checkinCancel: checkinCancel }),
                    success: function(response) {
                        $('#checkinResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#checkinResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Fee Paid form submission
            $('#feePaidForm').submit(function(event) {
                event.preventDefault();
                var feePaidPatron = $('#feePaidPatron').val();
                var feePaidPatronPwd = $('#feePaidPatronPwd').val();
                var feePaidFeeType = $('#feePaidFeeType').val();
                var feePaidPaymentType = $('#feePaidPaymentType').val();
                var feePaidFeeAmount = $('#feePaidFeeAmount').val();
                var feePaidFeeIdentifier = $('#feePaidFeeIdentifier').val();
                var feePaidTransactionId = $('#feePaidTransactionId').val();
                var feePaidCurrencyType = $('#feePaidCurrencyType').val();
                $.ajax({
                    url: '/fee_paid',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ feePaidPatron: feePaidPatron, feePaidPatronPwd: feePaidPatronPwd, feePaidFeeType: feePaidFeeType, feePaidPaymentType: feePaidPaymentType, feePaidFeeAmount: feePaidFeeAmount, feePaidFeeIdentifier: feePaidFeeIdentifier, feePaidTransactionId: feePaidTransactionId, feePaidCurrencyType: feePaidCurrencyType }),
                    success: function(response) {
                        $('#feePaidResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#feePaidResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // End Session form submission
            $('#endSessionForm').submit(function(event) {
                event.preventDefault();
                var endSessionPatron = $('#endSessionPatron').val();
                var endSessionPatronPwd = $('#endSessionPatronPwd').val();
                $.ajax({
                    url: '/end_session',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ endSessionPatron: endSessionPatron, endSessionPatronPwd: endSessionPatronPwd }),
                    success: function(response) {
                        $('#endSessionResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#endSessionResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Hold form submission
            $('#holdForm').submit(function(event) {
                event.preventDefault();
                var holdPatron = $('#holdPatron').val();
                var holdPatronPwd = $('#holdPatronPwd').val();
                var holdMode = $('#holdMode').val();
                var holdExpirationDate = $('#holdExpirationDate').val();
                var holdType = $('#holdType').val();
                var holdItemId = $('#holdItemId').val();
                var holdTitleId = $('#holdTitleId').val();
                var holdFeeAcknowledged = $('#holdFeeAcknowledged').val();
                $.ajax({
                    url: '/hold',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ holdPatron: holdPatron, holdPatronPwd: holdPatronPwd, holdMode: holdMode, holdExpirationDate: holdExpirationDate, holdType: holdType, holdItemId: holdItemId, holdTitleId: holdTitleId, holdFeeAcknowledged: holdFeeAcknowledged }),
                    success: function(response) {
                        $('#holdResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#holdResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Renew form submission
            $('#renewForm').submit(function(event) {
                event.preventDefault();
                var renewPatron = $('#renewPatron').val();
                var renewPatronPwd = $('#renewPatronPwd').val();
                var renewItemId = $('#renewItemId').val();
                var renewTitleId = $('#renewTitleId').val();
                var renewNbDueDate = $('#renewNbDueDate').val();
                var renewItemProperties = $('#renewItemProperties').val();
                var renewFeeAcknowledged = $('#renewFeeAcknowledged').val();
                var renewNoBlock = $('#renewNoBlock').val();
                var renewThirdPartyAllowed = $('#renewThirdPartyAllowed').val();
                $.ajax({
                    url: '/renew',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ renewPatron: renewPatron, renewPatronPwd: renewPatronPwd, renewItemId: renewItemId, renewTitleId: renewTitleId, renewNbDueDate: renewNbDueDate, renewItemProperties: renewItemProperties, renewFeeAcknowledged: renewFeeAcknowledged, renewNoBlock: renewNoBlock, renewThirdPartyAllowed: renewThirdPartyAllowed }),
                    success: function(response) {
                        $('#renewResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#renewResponse').text('Error: ' + error.responseText);
                    }
                });
            });

            // Renew All form submission
            $('#renewAllForm').submit(function(event) {
                event.preventDefault();
                var renewAllPatron = $('#renewAllPatron').val();
                var renewAllPatronPwd = $('#renewAllPatronPwd').val();
                var renewAllFeeAcknowledged = $('#renewAllFeeAcknowledged').val();
                $.ajax({
                    url: '/renew_all',
                    method: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ renewAllPatron: renewAllPatron, renewAllPatronPwd: renewAllPatronPwd, renewAllFeeAcknowledged: renewAllFeeAcknowledged }),
                    success: function(response) {
                        $('#renewAllResponse').text(JSON.stringify(response, null, 2));
                    },
                    error: function(error) {
                        $('#renewAllResponse').text('Error: ' + error.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>
